<template>
  <basic-container>
    <avue-crud
      :option="option"
      :data="data"
      :page="page"
      @row-del="rowDel"
      v-model="form"
      @row-update="rowUpdate"
      @row-save="rowSave"
      :before-open="beforeOpen"
      @search-change="searchChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @on-load="onLoad"
    >
      <template slot="menuLeft">
        <el-button type="primary" size="small" icon="el-icon-plus" plain @click="handleAdd">新增分享福利</el-button>
        <el-button type="primary" size="small" icon="el-icon-plus" plain @click="handleAdd">新增交易福利</el-button>
        <el-button type="primary" size="small" icon="el-icon-plus" plain @click="handleAdd">设置福利领取区域</el-button>
      </template>
      <template slot-scope="{row}" slot="category">
        <el-tag>{{row.categoryName}}</el-tag>
      </template>
    </avue-crud>

    <el-dialog
  title="新增分享福利"
  :visible.sync="dialogVisible"
  width="45%"
  >
   <el-form label-width="80px">
       <el-form-item label="活动名称">
        <el-input v-model="myName" style="width: 40%" disabled></el-input>
      </el-form-item>
       <el-form-item label="福利类型">
        <el-select v-model="welfareType" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
      </el-form-item>
       <el-form-item :label="mytit">
         <div>
             <span v-show="welfareType ==='1'">总金额： <el-input v-model="amount" style="width: 100px"  ></el-input> </span>
             <span v-show="welfareType ==='2'">折扣金额： <el-input v-model="discount" style="width: 100px" maxlength="3"></el-input></span>
             <span v-show="welfareType === '3'">礼品： <el-input v-model="giftName" style="width: 100px" maxlength="3"></el-input></span>
             <span >福利数： <el-input v-model="count" style="width: 100px" maxlength="3"></el-input></span>
             
             福利解锁条件： <el-select v-model="unlockCondition" placeholder="请选择">
                            <el-option
                            v-for="item in myoptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
         </div>
         <div style="margin-top: 20px; margin-left: 10px">
              次数： <el-input v-model="times" style="width: 100px" maxlength="3"></el-input>
              <span v-show="welfareType === '1'" style="margin-left: 10px">分配方式：</span> <el-select v-model="assignType" placeholder="请选择" v-show="welfareType === '1'">
                            <el-option
                            v-for="item in myoptionss"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
         </div>
      </el-form-item>
   </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisibleBtn">确 定</el-button>
  </span>
</el-dialog>
  </basic-container>
</template>
<script>
import {getSearch, getmyList, myremove, myremove1, update, add, getDetail,submitShare } from "@/api/activities/act";
import { mapGetters } from "vuex";

export default {
  data() {
    return {
          mytit: '现金福利',
          myoptionss: [{
          value: '1',
          label: '均分'
        }, {
          value: '2',
          label: '随机'
        }],
        myoptions: [{
          value: '1',
          label: '新用户查看次数'
        }, {
          value: '2',
          label: '分享次数'
        }, {
          value: '3',
          label: '咨询次数'
        }],
         options: [{
          value: '1',
          label: '现金福利'
        }, {
          value: '2',
          label: '代金券福利'
        }, {
          value: '3',
          label: '礼品福利'
        }],
        welfareType: '1',
        count:'',
       myName: '',
       amount: '',
       count: '',
       times: '',
       assignType: '',
       giftName: '',
       discount: '',
       unlockCondition: '',
      dialogVisible: false,
      myId: '',
      form: {
          	"activityId": '',
            "amount": '',
            "assignType": "",
            "count": '',
            "createTime": "",
            "createUser": '',
            "discount": '',
            "giftName": "",
            "id": '',
            "times": '',
            "unlockCondition": '',
            "welfareType": ''
      },
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      selectionList: [],
      option: {
        tip: false,
        border: true,
        index: false,
        viewBtn: false,
        selection: false,
        columnBtn: false,
        refreshBtn: false,
        searchBtn: false,
        editBtn: true,
        labelWidth: 130,
        addBtn: false,
        column: [
          {
            label: "活动名称",
            prop: "name",
            search: false,
          },
          {
            label: "福利种类",
            prop: "state",
            type: "date",
          },
          {
            label: "福利类型",
            prop: "unlockCondition",
            type: "date",
          },
          {
            label: "福利获取条件",
            prop: "welfareType",
            type: "date",
          },
    
        ]
      },
      data: []
    };
  },
  computed: {
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.notice_add, false),
        viewBtn: this.vaildData(this.permission.notice_view, false),
        delBtn: this.vaildData(this.permission.notice_delete, false),
        editBtn: this.vaildData(this.permission.notice_edit, false)
      };
    },
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(",");
    }
  },
  created() {
    if (this.$route.query.id) {
        console.log(JSON.parse(this.$route.query.id), 1111);
            this.myId = JSON.parse(this.$route.query.id).id;
            this.myName = JSON.parse(this.$route.query.id).name;
        }
  },
  watch: {
    welfareType(val) {
       if (val === '1') {
           this.mytit = '现金福利';
       } else if (val === '2'){
           this.mytit = '代金券福利';
       } else if (val === '3'){
           this.mytit = '礼品福利';
       }
    }
  },
  methods: {
      dialogVisibleBtn() {
          let params = {
               welfareType: this.welfareType,
                count: Number(this.counts),
                activityId: this.myId,
                amount: Number(this.amount) ? Number(this.amount) : 0,
                count: Number(this.count),
                times: Number(this.times),
                assignType: this.assignType,
                unlockCondition: this.unlockCondition,
                giftName: this.giftName ? this.giftName : 0,
                discount: this.discount ? this.discount : 0,
          }
          if (!params.welfareType || !params.amount || !params.count || !params.times || !params.assignType || !params.unlockCondition ) {
               this.$message({
          type: "warning",
          message: "请填写完整！"
         
        });
        return false;
          }
          console.log(params);
        submitShare(params).then(res => {
            this.onLoad();
             this.dialogVisible = false;
        // const data = res.data.data;
        // console.log(data);
        // this.page.total = data.total;
        // this.data =data;
      });
      },
    handleAdd() {
      this.dialogVisible = true;
    },
    rowSave(row, loading, done) {
      add(row).then(
        () => {
          loading();
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
        },
        error => {
          done();
          console.log(error);
        }
      );
    },
    rowUpdate(row, index, loading, done) {
      update(row).then(
        () => {
          loading();
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
        },
        error => {
          done();
          console.log(error);
        }
      );
    },
    rowDel(row) {
        console.log(row);
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
            if (row.state === '分享') {
                myremove(row.id).then(res => {
             });
            } else if (row.state === '福利') {
                myremove1(row.id).then(res => {
             });
            }
            
        //   return remove(row.id);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
        });
    },
    searchReset() {
      this.onLoad(this.page);
    },
    searchChange(params) {
       console.log(params);
       let value = 'getSearch';
      this.onLoad(this.page, params, value);
    },
    selectionChange(list) {
      debugger;
      this.selectionList = list;
    },
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return remove(this.ids);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.$refs.crud.toggleSelection();
        });
    },
    beforeOpen(done, type) {
      console.log(this.form.id);
      // this.$router.push({ path: "/monitoer/add" });
       this.$router.push({
        path: "/monitoer/add?id=" + this.form.id
      });
      // if (["edit", "view"].includes(type)) {
      //   getDetail(this.form.id).then(res => {
      //     this.form = res.data.data;
      //   });
      // }
      // done();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    onLoad() {
      getmyList(this.myId).then(res => {
        const data = res.data.data;
        console.log(data);
        this.page.total = data.total;
        this.data =data;
      });
    }
  }
};
</script>
<style>
</style>
